<!DOCTYPE html>
<?php
	if($_POST['update']=='yes'){
		$the_code=$_POST['code'];
		$this_name = rand(10000000,99999999);

		while( file_exists("tmp/".$this_name.'.html') ){
			$this_name = rand(10000000,99999999);
		}

		file_put_contents('tmp/'.$this_name.'.html',$the_code);
	}
?>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTML在线测试工具</title>
	<link rel="stylesheet" href="style.css">
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
	<div id="head">
		<h1 onclick="ace_show_set()">HTML在线测试工具</h1>
	</div>

	<div id="content">

		<div id="code">
			<form action="index.php" method="post" id="code-form">

				<input name="update" type="hidden" value="yes">
				<input name="jobs" id="form-jobs" type="hidden" value="">
				<input name="save" id="form-code" type="hidden" value="">

				<textarea name="code" id="codearea"><?php if($the_code==''){echo "";}else{echo $the_code;}?></textarea>

				<!-- <input class="btn" type="submit" value="提交">
				<span id="saveload-btn">
					<input type="submit" name="saveload" value="保存" class="btn" onclick="save_code();">
					<input type="submit" name="saveload" value="加载" class="btn" onclick="load_code();">
				</span> -->

			</form>

			<button style="margin-left:10px;" onclick="submit_code();" class="btn">提交</button>
			<span id="saveload-btn">
				<button style="margin-left:10px;" onclick="save_code();" class="btn">保存</button>
				<button style="margin-left:10px;" onclick="load_code();" class="btn">加载</button>
			</span>

		</div>

		<div id="move"></div>

		<div id="main">
			<?php if($_POST['update']=='yes'): ?>
				<iframe id="iframe" frameborder="0" scrolling="auto" src="get.php?id=<?php echo $this_name; ?>"><?php echo $the_code; ?></iframe>
			<?php else: ?>
				<iframe id="iframe" frameborder="0" scrolling="auto" src="first.html"></iframe>
			<?php endif; ?>
		</div>

	</div>

	<div id="foot">
		请在左侧的文本框中编辑您的代码，然后单击提交按钮测试结果。<span style="float:right;">HTML在线测试工具</span>
	</div>

	<script type="text/javascript">

		var winh=window.innerHeight
			|| document.documentElement.clientHeight
			|| document.body.clientHeight;

		var contenth=winh-74;

		the_content = document.getElementById('content');
		the_content.style.height = contenth+'px';

		the_code = document.getElementById('code');
		the_code.style.height = contenth-1+'px';

		the_main = document.getElementById('main');
		the_main.style.height = contenth+'px';

		the_codearea = document.getElementById('codearea');
		the_codearea.style.height = contenth-40+'px';

		the_move = document.getElementById('move');
		the_move.style.height = contenth+'px';

		window.onresize = function (){
			var winh=window.innerHeight
				|| document.documentElement.clientHeight
				|| document.body.clientHeight;

			var contenth=winh-74;

			the_content = document.getElementById('content');
			the_content.style.height = contenth+'px';

			the_code = document.getElementById('code');
			the_code.style.height = contenth-1+'px';

			the_main = document.getElementById('main');
			the_main.style.height = contenth+'px';

			the_codearea = document.getElementById('codearea');
			the_codearea.style.height = contenth-40+'px';

			the_move = document.getElementById('move');
			the_move.style.height = contenth+'px';

			var oBox = document.getElementById("content"), oLeft = document.getElementById("code"), oRight = document.getElementById("main"), oMove = document.getElementById("move"), oCode = document.getElementById("code-form").getElementsByTagName("div");

			oMove.style.left = oLeft.style.width = oCode[0].style.width = 500 + "px";
			oRight.style.width = oBox.clientWidth - 503 + "px";
			oRight.style.marginLeft = 503 + "px";

		}

		function save_code () {
			if( textAce.getValue() ){
				localStorage.sdcode = textAce.getValue();
			}else{
				alert("没有代码");
			}
		}

		function load_code () {
			textAce.setValue(localStorage.sdcode);
		}

		function submit_code() {
			the_codearea.value = textAce.getValue();
			document.getElementById('code-form').submit();
		}

		function ace_show_set(){
			textAce.setDisplaySettings();
		}

		window.onload = function() {
			var oBox = document.getElementById("content"), oLeft = document.getElementById("code"), oRight = document.getElementById("main"), oMove = document.getElementById("move"), oCode = document.getElementById("code-form").getElementsByTagName("div");
			oMove.onmousedown = function(e) {
				var disX = (e || event).clientX;
				oMove.left = oMove.offsetLeft;
				document.onmousemove = function(e) {
					var iT = oMove.left + ((e || event).clientX - disX);
		            var e=e||window.event,tarnameb=e.target||e.srcElement;
					var maxT = 1000 ;
					oMove.style.margin = 0;
					iT < 300 && (iT = 300);
					iT > maxT && (iT = maxT);
					oMove.style.left = oLeft.style.width = oCode[0].style.width = iT + "px";
					oRight.style.width = oBox.clientWidth - iT - 3 + "px";
					oRight.style.marginLeft = 3 + iT + "px";
					return false
				};
				document.onmouseup = function() {
					document.onmousemove = null;
					document.onmouseup = null;
					oMove.releaseCapture && oMove.releaseCapture()
				};
				oMove.setCapture && oMove.setCapture();
				return false
			};
		};

	</script>

	<script>
		function inject(options, callback) {
		    var baseUrl = options.baseUrl || "./editor";
		    var load = function(path, callback) {
		        var head = document.getElementsByTagName('head')[0];
		        var s = document.createElement('script');
		        s.src = baseUrl + "/" + path;
		        head.appendChild(s);
		        s.onload = s.onreadystatechange = function(_, isAbort) {
		            if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
		                s = s.onload = s.onreadystatechange = null;
		                if (!isAbort)
		                    callback();
		            }
		        };
		    };
		    load("ace.js", function() {
		        ace.config.loadModule("ace/ext/textarea", function() {
		            var event = ace.require("ace/lib/event");
		            var areas = document.getElementsByTagName("codearea");
		            for (var i = 0; i < areas.length; i++) {
		                event.addListener(areas[i], "click", function(e) {
		                    if (e.detail == 3) {
		                        ace.transformTextarea(e.target, options.ace);
		                    }
		                });
		            }
		            callback && callback();
		        });
		    });
		}
		// Call the inject function to load the ace files.
		var textAce;
		inject({}, function () {
		    // Transform the textarea on the page into an ace editor.
		    var t = document.querySelector("textarea");
		    textAce = ace.require("ace/ext/textarea").transformTextarea(t);
		});
	</script>

	<script type="text/javascript">

	</script>

</body>

</html>

